<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amazon Clone</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>

    <input type="checkbox" id="hamburger-toggle" style="display: none;">

    <div class="sidebar">
        <div class="sidebar-header">
            <h3><i class="fa-solid fa-user-circle"></i> Hello, Sign in</h3>
        </div>
        <ul class="sidebar-links">
            <li><a>Today's Deals</a></li>
            <li><a>Customer Service</a></li>
            <li><a>Registry</a></li>
            <li><a>Gift Cards</a></li>
            <li><a>Sell</a></li>
            <hr>
            <p>Shop By Department</p>
            <li><a>Electronics</a></li>
            <li><a>Computers</a></li>
            <li><a>Smart Home</a></li>
            <hr>
            <p>Help & Settings</p>
            <li><a>Your Account</a></li>
            <li><a>Your Orders</a></li>
            <li><label for="hamburger-toggle" class="close-sidebar-label">
                <i class="fa-solid fa-chevron-left"></i> Close Menu
            </label></li>
        </ul>
    </div>

    <label for="hamburger-toggle" class="overlay"></label>

    <header>
        <div class="navbar">
            <div class="nav-logo border">
                <div class="logo"></div>
            </div>

            <div class="nav-address border">
                <p class="add-first">Deliver to</p>
                <div class="add-icon">
                    <i class="fa-solid fa-location-dot"></i>
                    <p class="add-second">Lucknow</p>
                </div>
            </div>

            <div class="nav-search">
                <select class="search-select">
                    <option>All</option>
                </select>
                <input type="text" placeholder="Search Amazon" class="search-input">
                <div class="search-icon">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </div>
            </div>

            <div class="nav-signin border">
                <p><span>Hello, Sign in</span></p>
                <p class="nav-second">Account & Lists</p>
            </div>

            <div class="nav-return border">
                <p><span>Returns</span></p>
                <p class="nav-second">& Orders</p>
            </div>

            <div class="nav-cart border">
                <i class="fa-solid fa-cart-shopping"></i>
                Cart
            </div>
        </div>

        <div class="panel">
            <label for="hamburger-toggle" class="panel-all-label">
                <div class="panel-all">
                    <i class="fa-solid fa-bars"></i>
                    All
                </div>
            </label>
            <div class="panel-ops">
                <p>Today's Deals</p>
                <p>Customer Service</p>
                <p>Registry</p>
                <p>Gift Cards</p>
                <p>Sell</p>
            </div>
            <div class="panel-deals">
                Shop deals in Electronics
            </div>
        </div>
    </header>

    <div class="hero-section">
        <div class="hero-message">
            <p>You are on amazon.com. You can also shop on Amazon India for millions of products with fast local delivery. <a>Click here to go to amazon.in</a></p>
        </div>
    </div>

    <div class="shop-section">
        <div class="box">
            <div class="box-content">
                <h2>Health & Personal Care</h2>
                <div class="box-img" style="background-image: url('assets/box1_image.jpg');"></div>
                <p>See more</p>
            </div>
        </div>
        <div class="box">
            <div class="box-content">
                <h2>Discover fashion trends</h2>
                <div class="box-img" style="background-image: url('assets/box2_image.jpg');"></div>
                <p>See more</p>
            </div>
        </div>
        <div class="box">
            <div class="box-content">
                <h2>Electronics</h2>
                <div class="box-img" style="background-image: url('assets/box3_image.jpg');"></div>
                <p>See more</p>
            </div>
        </div>
        <div class="box">
            <div class="box-content">
                <h2>Beauty picks</h2>
                <div class="box-img" style="background-image: url('assets/box4_image.jpg');"></div>
                <p>See more</p>
            </div>
        </div>
        <div class="box">
            <div class="box-content">
                <h2>Pet Care</h2>
                <div class="box-img" style="background-image: url('assets/box5_image.jpg');"></div>
                <p>See more</p>
            </div>
        </div>
        <div class="box">
            <div class="box-content">
                <h2>New arrivals in Toys</h2>
                <div class="box-img" style="background-image: url('assets/box6_image.jpg');"></div>
                <p>See more</p>
            </div>
        </div>
        <div class="box">
            <div class="box-content">
                <h2>For your Fitness Needs</h2>
                <div class="box-img" style="background-image: url('assets/box7_image.jpg');"></div>
                <p>See more</p>
            </div>
        </div>
        <div class="box">
            <div class="box-content">
                <h2>Shop Laptops & Tablets</h2>
                <div class="box-img" style="background-image: url('assets/box8_image.jpg');"></div>
                <p>See more</p>
            </div>
        </div>
    </div>

    <footer>
        <div class="foot-panel1">
            Back to top
        </div>
        <div class="foot-panel2">
            <ul>
                <p>Get to Know Us</p>
                <a>Careers</a>
                <a>Blog</a>
                <a>About Amazon</a>
                <a>Investor Relations</a>
                <a>Amazon Devices</a>
                <a>Amazon Science</a>
            </ul>
             <ul>
                <p>Make Money with Us</p>
                <a>Sell products on Amazon</a>
                <a>Sell on Amazon Business</a>
                <a>Sell apps on Amazon</a>
                <a>Become an Affiliate</a>
                <a>Advertise Your Products</a>
                <a>Self-Publish with Us</a>
                <a>Host an Amazon Hub</a>
            </ul>
             <ul>
                <p>Amazon Payment Products</p>
                <a>Amazon Business Card</a>
                <a>Shop with Points</a>
                <a>Reload Your Balance</a>
                <a>Amazon Currency Converter</a>
            </ul>
             <ul>
                <p>Let Us Help You</p>
                <a>Amazon and COVID-19</a>
                <a>Your Account</a>
                <a>Your Orders</a>
                <a>Shipping Rates & Policies</a>
                <a>Returns & Replacements</a>
                <a>Manage Your Content and Devices</a>
                <a>Amazon Assistant</a>
                <a>Help</a>
            </ul>
        </div>

        <div class="foot-panel3">
            <div class="logo"></div>
        </div>

        <div class="foot-panel4">
            <div class="pages">
                <a>Conditions of Use</a>
                <a>Privacy Notice</a>
                <a>Your Ads Privacy Choices</a>
            </div>
            <div class="copyright">
                © 1996-2023, Amazon.com, Inc. or its affiliates
            </div>
        </div>
    </footer>

</body>
</html>